<template>
	<!-- 问题分类 -->
	<view class="questionClass">
		<view class="userTitle flex box-sizing  space-between items-center">
			<view v-if="platfrom != 'wx'" class="box-sizing paddingLeft-30" style="width: 120rpx;">
				<u-icon @click="leftClick" name="arrow-left" :size="25"></u-icon>
			</view>
			<view style="flex: 1;padding-left: calc(10rpx);"
				class=" flex box-sizing  flex-center items-center height-full">
				<view class="fontSize-30 weight-700 marginRight-10 color-696969">
					问题回复
				</view>
			</view>
			<view class="right paddingRight-30" >
				<view @click="$u.throttle(toBottom, 500)"
					class="submit flex flex-center items-center fontSize-27 color-white">
					回复
				</view>
			</view>
		</view>
		<view class="crads flex flex-end column">
			<scroll-view :refresher-triggered="triggered" scroll-y="true" :scroll-into-view = "domId" scroll-with-animation
				class="swiperItem flex column items-center " refresher-enabled
				@refresherrefresh="scrolltoupper()">
				<view v-if="details.name" class="color-696969 colorBj-fff padding-20  box-sizing width-full text-center weight-700 fontSize-32" style="border-bottom: 1rpx dashed #ededed;">
					{{details.name?details.name:''}}
				</view>
				<view class="colorBj-fff paddingTop-10 paddingLeft-30 paddingRight-30 box-sizing width-full flex space-between ">
					<view class="flex column items-center">
						<u-avatar :src="details.adminuser&&details.adminuser.headimg?details.adminuser.headimg:teacherAvatar" size = "30"></u-avatar>
						<span class="fontSize-24 color-ededed marginBottom-20" style="color: #ababab;margin-top: 10rpx;">
							{{details.adminuser&&details.adminuser.realname?details.adminuser.realname:''}}
						</span>
					</view>
					<view class="flex column flex-center items-center">
						<u-avatar :src="details.student&&details.student.avatar?details.student.avatar:userAvatar" size = "30"></u-avatar>
						<span class="fontSize-24 color-ededed marginBottom-20" style="color: #ababab;margin-top: 10rpx;">
							{{details.student&&details.student.name?details.student.name:''}}
						</span>
					</view>
				</view>
				<view  class="colorBj-fff paddingLeft-30 paddingRight-30 paddingBottom-30 box-sizing fontSize-28" style="flex: 1;" v-html="details.content"></view>
				<view class="colorBj-fff" v-if="details.files&&details.files!=''">
					<view class="marginBottom-20 box-sizing paddingLeft-30 paddingRight-30" ref = "tmp" v-if="details.files&&details.files!=''&&JSON.parse(details.files)&&JSON.parse(details.files).length>0" v-for="(t,i) in JSON.parse(details.files)" :key="i" style="width: 100%;height: 250rpx ;">
						<!-- <audio :src="t.url" :id = "t.url" v-if="['mp3','m4a','aac'].includes(t.url.slice(t.url.lastIndexOf('.') + 1))" controls></audio> -->
						<!-- <video v-if="['flv','mp4','m4a'].includes(t.url.slice(t.url.lastIndexOf('.') + 1))" :src="t.url" controls></video> -->
						<u-parse :content="returnDom(t)" style="width: 100%;height: 250rpx ;"></u-parse>
						<!-- <u--image :src="t.url" v-if="['gif','png','jpg','jpeg','webp'].includes(t.url.slice(t.url.lastIndexOf('.') + 1))" width="100%" height="250rpx "></u--image> -->
					</view>
				</view>
				
				
				<view class="marginTop-20 color-696969 marginBottom-20 paddingTop-10 fontSize-28 paddingBottom-10 width-full weight-700 colorBj-fff paddingLeft-30 paddingRight-30 box-sizing">
					回复列表
				</view>
				<view v-for="(it, index) in list" :key="index"
					class="colorBj-fff card box-sizing padding-20 fontSize-27 borderRadius-10 marginBottom-20">
					<view class="flex marginBottom-10 fontSize-27">
						<view class="label flex column items-center width-100" style="">
							<!-- 学员姓名: -->
							<u-avatar size="30" :src="it.adminuser&&it.adminuser.headimg?it.adminuser.headimg:userAvatar" > </u-avatar>
							<span class="color-696969 text-center fontSize-28 width-100 marginTop-10 weight-700 marginBottom-10">
								{{ it.adminuser && it.adminuser.realname ? it.adminuser.realname : '' }}
							</span>
						</view>
						<view  style="flex: 1;padding-left: 20rpx;padding-right: 20rpx; box-sizing: border-box;">
							<view class="contentText fontSize-24 flex space-between" style="flex: 1;border-bottom: 1rpx dashed #ededed;padding-bottom: 10rpx; ">
								<span style="color: #b7b7b7;">{{ it.create_time ? it.create_time : '' }}</span>
								<span class="fontSize-24">{{ parseInt(index) + 1 }}楼</span>
							</view>
							<view class="" style="margin-top: 20rpx;" v-html="it.content">
								
							</view>
							<view v-if="it.files&&it.files!=''" class="" style="margin-top: 20rpx;">
								
								<view class="marginBottom-20" ref = "tmp" v-if="it.files&&it.files!=''&&JSON.parse(it.files)&&JSON.parse(it.files).length>0" v-for="(t,i) in JSON.parse(it.files)" :key="i" style="width: 100%;height: 250rpx ;">
									<!-- <audio :src="t.url" :id = "t.url" v-if="['mp3','m4a','aac'].includes(t.url.slice(t.url.lastIndexOf('.') + 1))" controls></audio> -->
									<!-- <video v-if="['flv','mp4','m4a'].includes(t.url.slice(t.url.lastIndexOf('.') + 1))" :src="t.url" controls></video> -->
									<u-parse :content="returnDom(t)" style="width: 100%;height: 250rpx ;"></u-parse>
									<!-- <image src="../../static/cake.png" mode=""></image> -->
									<!-- <u--image :src="t.url" v-if="['gif','png','jpg','jpeg','webp'].includes(t.url.slice(t.url.lastIndexOf('.') + 1))" width="100%" height="250rpx "></u--image> -->
									
								</view>
							</view>
						</view>
					</view>
					
				</view>
				<view  class="color-696969 marginBottom-20 paddingTop-10 fontSize-28 paddingBottom-10 width-full weight-700 colorBj-fff paddingLeft-30 paddingRight-30 box-sizing">
					添加回复
				</view>
				<!-- 回复 -->
				<view class="flex column colorBj-fff box-sizing padding-20">
					<u--form labelPosition="left" :model="form" ref="uForm" :labelWidth="90">
						<u-form-item label="内容" prop="content" borderBottom required ref="item1">
							<u--textarea v-model="form.content" placeholder="请输入内容"></u--textarea>
						</u-form-item>
						<u-form-item label="附件" prop="files" borderBottom ref="item1">
							<!-- #ifdef H5  -->
							<u-upload accept="file" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"></u-upload>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<u-upload accept="video" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"></u-upload>
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<u-upload accept="all" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"></u-upload>
							<!-- #endif -->
						</u-form-item>
					</u--form>
					<view id = "btnId" class="operation flex box-sizing space-around items-center">
						<view  @click="$u.throttle(submit, 500)" class="flex flex-center items-center fontSize-30 color-white">
							回复
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		</view>
</template>

<script>
import userAvatar from '@/static/defaultAvatar.png'
import teacherAvatar from '@/static/teacherAvatar.png'
export default {
	data() {
		return {
			userAvatar,
			teacherAvatar,
			fileList1:[],
			form:{
				pid:'',
				content:'',
				files:''
			},
			triggered: false,
			list: [],
			pid:'',
			details:{},
			domId:'',
			platfrom:'app'

		};
	},
	onLoad(op) {
		this.pid = op.pid
		if(op.platfrom){
			this.platfrom = op.platfrom
		}
		this.form.pid = op.pid
		this.getList()
	},
	
	methods: {
		leftClick(){
			if(this.platfrom == 'wx'){
				uni.redirectTo({
					url:'/pages/index/questionClass'
				})
			}else{
				uni.navigateBack()
			}
		},
		toBottom(){
			this.domId = 'btnId'
			setTimeout(()=>{
				this.domId = ''
			},500)
		},
		getList() {
			uni.showLoading();
			this.$first.detail({faq_id:this.pid}).then(res => {
				console.log(res, '*******');
				this.details = res.data
				uni.hideLoading();
			}).catch(err => {
				uni.hideLoading();
			})
			this.$first.faqExtIndex({pid:this.pid}).then(res => {
				console.log(res, '*******');
				this.list = res.data
				this.triggered = false
				uni.hideLoading();
			}).catch(err => {
				uni.hideLoading();
				this.triggered = false
			})
		},
		returnDom(t){
			let file = t.url
			let doms = {
				'audio':`<audio src="${t.url}" id = "${t.url}" style="width: 100%;height: 250rpx;"  controls></audio>`,
				'video':`<video src="${t.url}" controls  style="width: 100%;height: 250rpx;"></video>`,
				'image':`<img src="${t.url}" style = "width:100%; height:250rpx; object-fit:cover;"><img>`
			}
			let dom = ''
			if(['flv','mp4','m4a'].includes(file.slice(file.lastIndexOf('.') + 1))){
				dom = doms['video']
				
			}
			if(['gif','png','jpg','jpeg','webp'].includes(file.slice(file.lastIndexOf('.') + 1))){
				dom = doms['image']
			}
			if(['mp3','m4a','aac'].includes(file.slice(file.lastIndexOf('.') + 1))){
				dom = doms['audio']
			}
			
			return dom
			
		},
		// 删除图片
		deletePic(event) {
			this.form.fileway = ''
			this[`fileList${event.name}`].splice(event.index, 1)
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			console.log(event.file,lists,'xxxxxxxxxxxx')
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.$uploadUrl+'Upload/upload', // 仅为示例，非真实的接口地址
					// url: 'http://bbsf.test/api/Upload/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						upload_config_id: 1
					},
					header: {
						token: uni.getStorageSync('token'),
						// 'content-type': 'multipart/form-data'
					},
					success: (res) => {
						resolve(JSON.parse(res.data).data)
					},
					fail: (err) => {
					}
				});
			})
		},
		submit() {
			
			let form = this.form
			if (!form.content || form.content == '') {
				return uni.showToast({
					title: '请输入内容',
					icon: 'none'
				})
			}
			let files = [{
				url: this.fileList1 && this.fileList1.length > 0 ? this.fileList1[0].url : ''
			}]
			let params = {
				
			}
			let info = this.form
			params = {
				...params,
				...this.form
			}
			params['files'] = files
			this.$first.faqExtAdd(params).then(res => {
				if (res.status == 200) {
					uni.showToast({
						title: '提交成功!',
						icon: 'none'
					})
					uni.redirectTo({
					     url: `/pages/index/questionDetails?pid=${this.pid}&platfrom=${this.platfrom}`
				   })
					// uni.navigateBack()
				} else {
					uni.$u.toast('提交失败')
				}
			})
		},
		
		scrolltoupper() {
			this.triggered = true
			this.getList()
		},
	}
}
</script>

<style lang="scss">
.questionClass {
	height: 100vh;
	box-sizing: border-box;
	background-color: #F8F9FD;

	.userTitle {
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		background-color: #fff;
		border-bottom: 1rpx solid #ededed;
	}
	video{
		width: 100%!important;
		height: 250rpx !important;
	}
	.submit {
		width: 120rpx;
		padding: 5rpx 0rpx;
		border-radius: 10rpx;
		border: 1rpx solid #fff;
		background-color: #ea9700a1;
	}
	.operation {
		width: 100%;
		height: 120rpx;
		// background-color: #f7f7f7;
		background-color: #fff;
	
		view {
			width: 80%;
			border-radius: 500rpx;
			padding: 20rpx 0;
			border: 1rpx solid #fff;
			background-color: #ea9700a1;
		}
	}

	.crads {
		width: 100%;
		flex: 1;
		height: calc(100vh  - 120rpx);
		// height: calc(100vh - 140rpx - 120rpx);
		// overflow-y: auto;
		.swiper {
			height: calc(100vh - 140rpx - 120rpx);

			.swiperItem {
				width: 100%;
				height: calc(100vh - 140rpx - 120rpx);
				// overflow-y: auto;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
		.swiperItem {
			width: 100%;
			height: calc(100vh - 20rpx - 120rpx);
			// overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.card {
			// margin: 0 auto 30rpx;
			width: calc(100%);
			color: #333;
		}

		.color-f6ffff {
			background-color: #f6ffff;
		}

		.color-fff8f6 {
			background-color: #fff8f6;
		}
	}

}
</style>
